import { socketUrl } from '@/config'

interface IData {
  action: string
  socketType: string
  chartName: string
  value?: boolean
  data?: string
}
export default class SocketService {

  // 单例模式
  static instance : SocketService = null
  static get Instance() {
    if(!this.instance) {
      this.instance = new SocketService()
    }
    return this.instance
  }

  // websocket服务的对象
  private ws
  
  private callBackMapping = {}

  // 是否已经连接成功
  private connected = false
  // 重新发送次数
  private sendRetryCount = 0
  private connectRetryCount = 0
  // 连接服务器
  public connect() {
    this.ws = new WebSocket(socketUrl)
    // 连接成功
    this.ws.onopen = () => {
      this.connected = true
      this.sendRetryCount = 0
      this.connectRetryCount = 0
      console.log("%c =========== websocket连接建立 ==========", "color:pink")
    }
    // 1 连接失败 2 成功之后 关闭服务器
    this.ws.onclose = () => {
      this.connected = false
      this.connectRetryCount++
      setTimeout(() => {
        this.connect()
      }, 500 * this.connectRetryCount);
      console.log("%c ========  websocket断开连接 重试中 ==========", "color:red")
    }
    // 接收服务器发送过来的数据
    this.ws.onmessage = e => {
      console.log(`%c == 接收服务器数据 == %c ${JSON.parse(e.data).socketType}`,"color: yellow","")
      const realData : IData = JSON.parse(e.data)
      const socketType = realData.socketType
      const action = realData.action
      if(this.callBackMapping[socketType]) {
        switch (action) {
          case 'getData':
            const data = JSON.parse(realData.data)
            this.callBackMapping[socketType](data)
            break;
          case 'fullScreen':
            this.callBackMapping[socketType](realData)
            break;
          case 'themeChange':
            this.callBackMapping[socketType](realData)
            break;
          default:
            break;
        }
      }

      // const realData = JSON.parse(e.data)
      // const socketType = realData.socketType
      // // 判断回调函数是否存在
      // if (this.callBackMapping[socketType]) {
      //   const action = realData.action
      //   if (action === 'getData') {
      //     const data = JSON.parse(realData.data)
      //     this.callBackMapping[socketType].call(this, data)
      //   } else if (action === 'fullScreen') {
      //     this.callBackMapping[socketType].call(this, realData)
      //   } else if (action === 'themeChange') {
      //     this.callBackMapping[socketType].call(this, realData)
      //   }
      // }
    }
  } 

  // 回调函数的注册 这里的回调函数就是组件中的getData
  registerCallBack (socketType, callBack) {
    this.callBackMapping[socketType] = callBack
  }

  // 取消某一个回调函数 组件卸载时 把对应getData从队列中删掉
  unRegisterCallBack (socketType) {
    this.callBackMapping[socketType] = null
  }

  // 发送数据给客户端
  public send(data : IData) {
    // 判断此时此刻连接有没有成功
    console.log(`%c == 客户端发送数据 == %c ${data.socketType}`,"color: yellow","")
    if(this.connected) {
      this.ws.send(JSON.stringify(data))
    }else {
      this.sendRetryCount++
      // 重发数据
      setTimeout(() => {
        this.send(data)
      }, 500 * this.sendRetryCount)
    }
    
  }

}


